<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{display: flex;}
        li{
            list-style: none;
        }
        div>li{
            border:1px solid #000;
            border-top: 0;
        }
        div>li+li{
            border-left: 0;
        }
    </style>
</head>
<body>
    <!-- <div class="header">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div>
    <div class="banner">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div> -->
</body>
<script>
    // var i = 0;
    // while(i<10){
    //     document.write("*");
    //     i++;
    // }  
    // console.log();

    // var i = 23;
    // while(i<=33){
    //     document.write("*");
    //     i++;
    // }

    // 10 9 8 7 6 5 4 3 2 1 0 -1 -2
    // var i = 10;
    // while(i >= 1){  // !!!!

    //     i--;  
    // }
    // console.log(i);   //!!!



    var i = 10;
    while(i >= 1){  //
        document.write("<div>")
        
        var j = 1;
        while(j<=10){
            document.write("<li>");
            document.write(j);
            document.write("</li>");
            j++;
        }
            
        document.write("</div>")
        i--;  
    }
    console.log(i);   //


</script>
</html>